<template>
  <div>
    <el-form ref="form" :model="form" size="mini" label-width="150px" style="margin-top:20px;" label-position="left">
      <el-form-item label="供应商名称：">
        <el-col :span="5">
          <span>{{form.supplierName}}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="采购价格协议名称：">
        <el-col :span="5">
          <span>{{form.agreementName}}</span>
        </el-col>
      </el-form-item>
      <el-form-item label="协议起止时间：">
        <span>{{form.startDate}}</span>
        <span> &nbsp;&nbsp; - &nbsp;&nbsp; </span>
        <span>{{form.endDate}}</span>
      </el-form-item>
    </el-form>

    <div class="tableMain pltable">
      <el-form ref="form" :model="form" size="mini" style="width:90%;">
        <el-form-item>
          <el-button type="primary" size="mini" v-if="form.status===0 && form.agreementType !== 0" @click="_handleIsAgree(1)">拒绝</el-button>
          <el-button type="primary" size="mini" v-if="form.status===0 && form.agreementType !== 0" @click="_handleIsAgree(2)">同意</el-button>
          <el-button type="primary" size="mini" v-if="form.agreementType===0 && form.status !== 4" @click="handleMultipleDel()">删除</el-button>
          <el-button type="primary" size="mini" v-if="setRole('修改价格协议') && form.agreementType===0 && form.status !== 4" @click="_handleEdit()" style="float:right;">修改</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="multipleTable" :data="selectTable.tableData" :row-class-name="tableRowClassName" @selection-change="selectTable.handleMultipleSelect">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="goodsSpec" label="规格型号" align="center">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.goodsSpec" :key="index">
              <span v-if="item!=null">{{item.paramName}} :</span>
              <span v-if="item!=null"> {{item.paramValue}} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitName" label="采供单位" align="center"></el-table-column>
        <el-table-column prop="goodsPrice" label="单价" align="center"></el-table-column>
        <el-table-column prop="isFreight" label="含运费" align="center">
          <template slot-scope="scope">
            <el-switch disabled active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" v-model="scope.row.isFreight"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="freight" align="center" label="运费">
          <template slot-scope="scope">
            <div v-show="scope.row.isFreight == '0'">
              <span>{{scope.row.freight}}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" :disabled="form.agreementType !== 0 && form.status === 4" @click="handleSingleDel(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <page-unit :pageData="selectTable.pageData" :func="_getOrderPriceAgreementDetail"></page-unit>

      <el-form size="mini" style="width:90%;">
        <el-form-item>
          <el-button type="primary" size="mini" @click="_handleGoBack()" style="margin-top:20px;float:right;">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import pageUnit from "components/Page";
import u from "@/util";
import { TableHandle } from "@/util/class";
import {
  getOrderPriceAgreementDetail,
  updateOrderPriceAgreementStatus,
  deleteAgreementGoods
} from "@/api";

export default {
  computed: mapState(["sub", "merchantId", "userName", "userInfo", "power"]),
  components: { pageUnit },

  data () {
    return {
      id: '',  // 协议主键id
      form: {
        agreementId: '',  // 协议id
        creater: '',  // 创建人
        supplierId: '',  // 供应商ID
        supplierName: '',  // 供应商名称
        isLogin: '',  // 供应商是否入驻
        customerId: '',  // 企业客户ID
        customerName: '',  // 企业客户名称
        agreementType: 0,  // 协议类型 0-自建 1-同步
        status: '',  // 协议状态
        startDate: '',  // 开始时间
        endDate: '',  // 结束时间
        agreementName: '',  // 协议名称
      },
      selectTable: new TableHandle()
    }
  },

  created () {
    this.form.agreementId = u.getQuery().id  // 协议id
    this.form.agreementType = Number(u.getQuery().agreementType)  // 协议类型
    this.form.supplierId = u.getQuery().supplierId  // 供应商id
    this.form.isLogin = u.getQuery().isLogin  // 供应商是否入驻
    this.form.status = Number(u.getQuery().status)  // 协议状态，待确认0显示同意拒绝
  },

  mounted () {
    this._getOrderPriceAgreementDetail(this.selectTable.pageData.pageSize, 1)
  },

  methods: {
    setRole (key) {
      return u.selectTitle(this.power, key)
    },

    _handleGoBack () {
      history.go(-1)
    },

    _handleEdit () {
      u.routerTo("/operate-management/supplier-management/supplier-supplierMg/supplier-PurchaseEdit", {
        agreementId: this.form.agreementId,
        agreementType: this.form.agreementType,
        status: this.form.status,
        supplierId: this.form.supplierId,
        supplierName: this.form.supplierName,
        isLogin: this.form.isLogin
      });
    },

    tableRowClassName ({ row, rowIndex }) {
      if (row.isUpdate === 1) {
        return 'warning-row';
      }
      return '';
    },

    // 查看价格协议详情
    _getOrderPriceAgreementDetail (pageSize, pageNum) {
      getOrderPriceAgreementDetail({
        agreementId: this.form.agreementId,
        pageSize: pageSize,
        pageNum: pageNum
      }).then(res => {
        if (res.data.goodsList !== undefined) {
          res.data.goodsList.forEach(i => {
            i.isFreight = i.isFreight.toString()
          })
          this.selectTable.tableData = res.data.goodsList
        } else {
          this.selectTable.tableData = []
        }
        this.selectTable.pageData.totalItems = res.data.pageTotal
        this.form.agreementId = res.data.id
        this.form.supplierId = res.data.supplierId
        this.form.supplierName = res.data.supplierName
        this.form.customerId = res.data.customerId
        this.form.customerName = res.data.customerName
        this.form.agreementType = res.data.agreementType
        this.form.status = res.data.status
        this.form.startDate = u.foryear(res.data.startDate)
        this.form.endDate = u.foryear(res.data.endDate)
        this.form.agreementName = res.data.agreementName
        this.id = res.data.id
      })
    },

    // 修改价格协议状态，同意拒绝
    _handleIsAgree (status) {
      updateOrderPriceAgreementStatus({
        status: status,  // 状态： 0- 待确认 1-拒绝 2-同意
        agreementId: this.form.agreementId,  // 协议id
        startDate: this.form.startDate,  // 开始时间，status=2时必传（年-月-日）
        endDate: this.form.endDate,  // 协议结束时间，status=2时必传（年-月-日）
        type: this.form.isLogin  // 类型：1-入驻 2-非入驻(用于商户入驻同步商品)
      }).then(res => {
        history.back()
      })
    },

    handleMultipleDel () {
      if (this.selectTable.multipleSelectTable.length === 0) {
        this.$message.error('请先选择要删除的商品')
        return
      }
      let ids = []
      this.selectTable.multipleSelectTable.forEach(i => {
        ids.push({ id: i.id })
      })
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        deleteAgreementGoods({
          goodsList: JSON.stringify(ids),
          id: this.id
        }).then(res => {
          this._getOrderPriceAgreementDetail(this.selectTable.pageData.pageSize, 1)
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },

    handleSingleDel (row) {
      let ids = []
      ids.push({ id: row.id })
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        deleteAgreementGoods({
          goodsList: JSON.stringify(ids),
          id: this.id
        }).then(res => {
          this._getOrderPriceAgreementDetail(this.selectTable.pageData.pageSize, 1)
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    }
  }
}
</script>

<style scoped>
.pltable /deep/ .el-table .warning-row {
  background: oldlace;
}
.pltable .pageblock {
  width: 93%;
}
</style>
